HK LAB / BRAND.SYS · 현호색
v 2.02026.04SEOUL · KR
BRAND DESIGN SYSTEM — 현호색 (CORYDALIS) BLUE

현호색의 푸름,
정밀과 깊이의 색

이른 봄 산자락에 피는 현호색(玄胡索)의 보랏빛 코발트와 청량한 하늘빛을 HK Lab의 고유색으로 정립했습니다. 지적 정밀함과 차분한 신뢰를 동시에 담는 코퍼레이트 컬러. — Color · Type · Components · Patterns

Hyunho Blue Color · 21 tokens Type · Pretendard + JBMono Components · 14 Light + Dark
PRIMARY MARK · DARK HYUNHO GRADIENT · CSS
01

Brand · 브랜드

HK Lab의 정체성은 현호색(Corydalis remota)의 두 가지 푸른 톤에서 출발합니다. 라이트 배경에서는 짙은 코발트→하늘빛 그라디언트, 다크 배경에서도 같은 그라디언트를 유지해 단일 시그니처를 만듭니다.

색의 출처 — 현호색이라는 꽃

SAMPLE A · 보라끼 군락
VIOLET-BLUE#5F3FBA → #A693E5
SAMPLE B · 하늘빛 군락
SKY-BLUE#1F3494 → #9EC4F7
현호색(玄胡索)

이른 봄 산기슭에 피는 자생화. 한 군락에서 보랏빛 코발트부터 맑은 하늘빛까지 변주가 일어나는 특별한 꽃입니다. 그 폭이 곧 HK Lab의 색역이 됩니다.

— signature gradient: 2A3FBF → 3D6BE8 → 6FA9F3

Primary Logo · 두 가지 배경

PRIMARY · LIGHTHK = Ink #0A1530 / Lab = Hyunho Gradient
PRIMARY · DARKHK = White / Lab = Hyunho Gradient

Lockup variations · 6 variants

Hyunho · 기본
Violet-Blue · 캠페인
Sky · 다크 배경
Mono · 단색 흑
Reverse · 단색 백
Mist · 옅은 하늘 배경

로고 사용 규정 — Clearspace · Don'ts

× ×
Clearspace

로고 둘레에 x = K 너비 만큼 여백을 유지합니다.

18px / 24mm
Minimum size

디지털 18px / 인쇄 24mm 이하로 사용 금지.

회전 금지
색조 변경 금지
비율 왜곡 금지
효과 추가 금지
Don'ts

회전 · 색조 변경 · 비율 왜곡 · 추가 효과 금지.

기하학적 DNA — The Chevron

K = Chevron, Hyunho = Spectrum

로고의 'K'는 두 개의 sharp angular cut으로 화살표를 형성합니다. 이 형태가 다이어그램·디바이더·진행 표시의 기본 모티프이며, 색은 현호색의 보라→하늘 스펙트럼을 따릅니다.

  • angle: 45° / 60°
  • weight: 16% of glyph height
  • terminus: flat (not rounded)
  • color: hyunho gradient
arrow
double
down
grad
mist

브랜드 보이스 — Voice & Tone

PRECISE정밀하게

≤400ms, ≥99%, 50MP, ROI 같이 측정 가능한 수치로 말합니다.

BILINGUAL이중 언어

한국어가 본문, 핵심 용어(AI Detector, Edge Computing)는 영문으로 병기합니다.

CALM차분하게

현호색의 푸름처럼. 과장 없이, 단정적이되 부드러운 어조를 유지합니다.

HUMAN사람을 향해

기술의 끝에는 검사원, 운영자, 의사결정자가 있습니다. "Zero 휴먼 에러"의 주어는 늘 사람입니다.

02

Color · 컬러

현호색의 색역을 9단계 스케일로 정리하고, 라이트·다크 모드와 의미 컬러를 함께 정의했습니다.

Signature Gradients — 시그니처 그라디언트

Hyunhoprimary · 모든 모드
#2A3FBF→#3D6BE8→#6FA9F3
Violet-Bluecampaign · 보라끼
#7B5CD6→#3D6BE8→#6FA9F3
Deep Nighthero · 깊이
#0A1530→#11225C→#2A3FBF

Core Palette — 핵심 토큰

Functional Scales — 기능 스케일

Semantic — 의미 컬러

Success#2BA66B합격 · 양품
Warning#E8A02A주의 · 재검
Danger#E04A5A불량 · 결함
Info#3D6BE8정보 · 측정값

Light · Dark Surfaces — 표면

LIGHT MODE
bg / 0#FFFFFF
surface / 1#F2F4F9
surface / 2#E2E5EE
border#C2C8D6
fg / strong#0A1530
DARK MODE
bg / 0#07102A
surface / 1#0E1B40
surface / 2#172657
border#243573
fg / strong#FFFFFF
03

Type · 타이포그래피

국문은 Pretendard, 영문 본문도 Pretendard로 통일. 기술 라벨·코드·수치는 JetBrains Mono.

Pretendard Variable
가나다 ABC 0123 가나다 ABC 0123 가나다 ABC 0123 가나다 ABC 0123
weights · 100–900국문/영문 본문UI 헤딩 + 본문
JetBrains Mono
≤ 400ms · 99.4% /api/v1/inspect M2379-00 · ROI:9 2026.04.27
weights · 400–600코드 · 데이터 · 라벨tabular figures

Type Scale — 타입 스케일

TokenUseSize / LineWeightSample
display/xl히어로 메인 카피96 / 100800정밀한 비전
display/l섹션 메인 타이틀72 / 80800AI Vision
display/m페이지 헤딩56 / 64700제품 소개
heading/l카드/그룹 타이틀32 / 40700AI Detector
heading/m서브 헤딩24 / 32600실시간 결함 검출
heading/s인라인 헤딩18 / 26600성능 목표
body/l리드 본문18 / 28400통합 AI 비전 관리 플랫폼
body/m본문 기본16 / 26400정확도 99% 이상으로 실시간 추론합니다.
body/s캡션 · 보조14 / 22400HK Lab Inc. | HK AI Vision System
label/mono기술 라벨 · 라벨12 / 16500SECTION · 01 / DETECTOR
04

Space · Radius · Shadow

4px 베이스 그리드. sharp(2px)와 soft(12) 두 가지 인격. 그림자는 라이트·다크 별도 + 시그니처 글로우.

Spacing Scale — 4px base

4
8
12
16
24
32
48
64
96
128

Radius — 두 가지 인격

sharp / 2산업·정밀
soft / 12UI 카드
pill / 999태그·뱃지
cut / 12°chevron 모티프

Elevation — 그림자 + Glow

elev / 1
elev / 2
elev / 3
glow / blue
glow / sky
glow / violet
05

Motion · Iconography

Snappy ease-out 곡선과 250ms 기본. 아이콘은 1.5px stroke, square cap, chevron 모티프 우선.

Motion tokens

quick120ms · linear호버, 포커스 링
base250ms · ease-out버튼, 토글, 토스트
flow450ms · cubic-bezier(.2,.8,.2,1)모달, 페이지 전환
scan900ms · loop비전 스캔, 진행 표시

Iconography — 16 icons

06

Components · 컴포넌트

실제 홈페이지에서 즉시 쓸 수 있는 14종의 UI 컴포넌트. 라이트와 다크 모드 모두 검증됨.

Buttons

LIGHT
DARK

Form · Inputs

LIGHT
검사 모드
다크 모드

Badges · Tags · Chips

STATUS
합격 · PASS 재검 · REVIEW 불량 · FAIL 측정중 · LIVE 대기 · IDLE
AI Detector Edge Computing Platform Real-time + 12

Cards — 제품 · 케이스 · 통계

PRODUCT · 01
[ AI DETECTOR · product shot ]

AI Detector

웹캠·엣지 디바이스·스마트폰 어디서든 실시간 결함 검출. Takt time ≤ 400ms

99.4% accuracy자세히
PRODUCT · 02
[ AI RULER · station photo ]

AI Ruler

Jig + Backlight + Vacuum Chuck 정밀 측정. 50MP / 200MP 재측정 지원

±2µm자세히
PRODUCT · 03
[ AI PLATFORM · dashboard ]

AI Platform

제품별 AI 모델 등록·학습·배포·통계 분석을 하나의 콘솔에서.

MES · DB · OPC-UA자세히
METRIC ≤ 400ms

Takt time per inspection · 고속 판정

METRIC ≥ 99%

딥러닝 기반 자동 판정 정확도

METRIC 100%

개별 단위 이력 추적 · MES 연동

CASE STUDY
"검사원 의존도를 낮추면서도 동일 라인에서 Zero 휴먼 에러를 달성했습니다."
Operations Lead2차 전지 부품 제조 · 2025

Hybrid Edge Computing

모델 추론은 라인 옆 엣지에서, 학습·배포·통계는 클라우드에서. 네트워크 단절에도 검사가 멈추지 않습니다.

아키텍처 보기

Bilingual Reporting

리포트와 알림은 한국어/영문 동시 발행. 글로벌 고객사와의 합의 기준을 일치시킵니다.

샘플 보기

Header · Navigation

LIGHT · TOP NAV
DARK · TOP NAV

Footer

Alerts · Toasts

i
새 모델 v2.4 배포 완료AI Detector 라인 3·4·5 적용됨
✓
합격샘플 #M2379-00 정상 판정
!
재검 권장ROI 9 측정값이 임계값에 근접합니다
×
결함 검출표면 색상 차이 — 라인 2 자동 정지됨
07

Patterns · 패턴

반복적으로 등장하는 화면 단위들. AI 자료의 시각 언어를 그대로 가져와 현호색 톤으로 재정렬했습니다.

Step Flow — STEP 01 → 04

01
제품 이송 / 정렬컨베이어 · 비전 트리거
02
AI 비전 검사Detector / Ruler
03
양·불 판정 / 분류Edge inference
04
이력 저장 / MES 연동OPC-UA · DB

Live Inspection Strip — 검사 모니터링

LIVE · LINE 03 · DETECTOR2026.04.27 · 14:22:08 KST
#0421PASS
#0422PASS
#0423PASS
#0424REVIEW
#0425PASS
#0426FAIL
#0427PASS
#0428PASS
#0429· · ·
1,284pass
21review
3fail
99.81%yield

Section Header — 자료의 SECTION 패턴

01 / SECTION

AI Detector

실시간 AI 비전 결함 검사 시스템

08

Homepage Preview · 홈페이지 적용 예

위의 토큰과 컴포넌트만으로 만든 hklab.co.kr 리뉴얼 첫 화면 — 다크 모드.

https://hklab.co.kr
  • 제품
  • 솔루션
  • 기술
  • 회사
  • 문의
HK AI VISION SYSTEM · 2026

검사원의 눈 대신,
AI가 모든 라인을 봅니다.

HK Lab은 실시간 결함 검출(AI Detector), 비접촉 정밀 측정(AI Ruler), 그리고 통합 모델 관리(AI Platform)를 하나의 Hybrid Edge Computing 플랫폼으로 제공합니다.

≤ 400msTakt time
≥ 99%판정 정확도
100%이력 추적
0휴먼 에러
PRODUCTS · 03

현장에 바로 들어가는 세 가지 모듈

01 · DETECTOR
[ camera + edge box ]

AI Detector

웹캠·엣지·스마트폰 — 어디서든 실시간 결함 검출.

제품 보기
02 · RULER
[ ruler station ]

AI Ruler

Jig + Backlight + Vacuum Chuck — 형상 공차 자동 측정.

제품 보기
03 · PLATFORM
[ console screenshot ]

AI Platform

모델 등록·학습·배포·통계 분석을 하나의 콘솔에서.

제품 보기